<!--新建一课-->
<template>
  <div class="class_management_container">
    <div class="search_box">
      <div  class="btn btn_add" @click="showPopup('ruleForm')">
        <i class="el-icon-plus"></i>
        <span class="btn_txt">新建一课</span>
      </div>
      
    </div>
    
    <div class="table_box">
      <adminTable :tableHead="tableHead" :tableData="tableData"></adminTable>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.curPage"
        :page-sizes="[10, 20, 50]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalRows">
      </el-pagination>
    </div>

    <transition name="el-fade-in-linear">
      <div class="popup-container" v-show="popupState.showStatus">
        <div class="popup">
          <i class="el-icon-error icon_close" @click="popupState.showStatus = false"></i>
          <div class="title">{{popupState.popupName}}</div>

          <div class="content">
            <el-form :model="formData" ref="ruleForm" :disabled="popupState.popupName == '教室详情'"  :inline="true"  label-position="left"
               class="form">
              <div style="overflow:hidden">
                
                <el-form-item label="课程名称 : "  size="small" class="">
                  <el-input v-model="formData.subjectName" autocomplete="off" ></el-input>
                </el-form-item>

                <el-form-item label="所属类别 : "  size="small" class="">
                  <el-select @change="changeClass" v-model="formData.subjectCategory" >
                    <el-option  label="基础知识" value="jczs"></el-option>
                    <el-option  label="能力拓展" value="nltz"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="所属科目 : "  size="small" >
                  <el-select  v-model="formData.subjectKemu" >
                    <el-option v-for="(item,key) in subjectList" :key="key" :label="item.subjectName" :value="item.subjectCode">
                    </el-option>
                  </el-select>
                </el-form-item>

                <div class="clear"></div>

                <h4 style="margin-bottom: 20px;">课程内容</h4>

                <ul class="class_list">
                  <li class="class_item" v-for="(item, index) in classList" :key="index">
                    <span class="fl">{{index + 1}}.</span>
                    <div>
                      <el-form-item label="大图地址 : " style="width: 100%"  size="small" class="">
                        <el-input v-model="item.contentImageFile" autocomplete="off" ></el-input>
                      </el-form-item>

                      <el-form-item label="音频地址 : " style="width: 100%"  size="small" class="">
                        <el-input v-model="item.contentAudioFile" autocomplete="off" ></el-input>
                      </el-form-item>

                      <div class="clear"></div>

                      <el-checkbox @change="(e) => changeInteractive(e, item)" v-model="item.hasInteractive">交互</el-checkbox>

                      <div class="interactive_box" v-if="item.hasInteractive">
                        <el-form-item label="交互A地址 : " style="width: 100%"  size="small" class="">
                          <el-input v-model="item.iamgeAFile" autocomplete="off" ></el-input>
                        </el-form-item>
                        <el-form-item label="交互B地址 : " style="width: 100%"  size="small" class="">
                          <el-input v-model="item.iamgeBFile" autocomplete="off" ></el-input>
                        </el-form-item>
                        <el-form-item label="交互音频 : "  style="width: 100%;"  size="small" class="">
                          <el-input v-model="item.questionAudioFile" autocomplete="off" ></el-input>
                        </el-form-item>
                        <el-form-item label="正确答案 : " prop="trueAnswer" size="small" class="">
                          <el-input  v-model="item.trueAnswer" autocomplete="off" ></el-input>
                        </el-form-item>
                      </div>
                      
                      <h5 style="color: red; cursor: pointer; display:inline-block;" @click="deleteClassItem(index)">删除本条</h5>
                    </div>
                  </li>
                </ul>

                <span class="addClassItem" @click="addClassItem">添加</span>
                
              </div>

            </el-form>

            <div class="btn_box">
              <div class="btn btn_add" v-if="popupState.popupName == '新建一课'" @click="submitAdd('ruleForm')">
                <span class="btn_txt">保存</span>
              </div>

              <div class="btn btn_add" v-if="popupState.popupName == '编辑'" @click="submitEdit('ruleForm')">
                <span class="btn_txt">保存</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<style>
.interactive_box .el-form-item {
  margin-bottom: 0 !important;
  flex-wrap: wrap;
  margin-left: 20px;
}
.class_management_container .popup .school_list .school_item .el-form-item--small.el-form-item  {
  margin-bottom: 0;
  margin: 15px 0;
}
.class_management_container .popup .school_list .school_item .el-form-item--small.el-form-item label {
  width: 60px !important;
}

.class_management_container .popup .el-input--small {
  width: 100%;
}
.class_management_container .popup .el-form-item--mini.el-form-item, 
.class_management_container .popup .el-form-item--small.el-form-item {
  margin-right: 20px;
  width: 30.5%;
  margin-bottom: 25px;
}
.class_management_container .popup .el-form-item__content {
  width: calc(100% - 90px)
}

.class_management_container .avatar-uploader {
  margin-right: 20px;
}
.class_management_container .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.class_management_container .avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.class_management_container .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.class_management_container .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>

<style scoped>
.interactive_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0;
}
.class_item {
  display: flex;
  padding-bottom: 10px;
  margin-top: 20px;
  border-bottom: 1px dashed #ccc;
}
.class_item span {
  margin-right: 20px;
}
.addClassItem {
  font-size: 20px;
  margin-top: 20px;
  display: inline-block;
  cursor: pointer;
}


.class_management_container .btn_add i {
  margin-right: 5px;
  margin-left: 10px;
}

.el-icon {
  cursor: pointer;
  color: #77A4FF;
}
.school_list .school_item {
  background: #F0F2F5;
  padding: 0 0 0 20px !important;
  box-sizing: border-box;
  margin-bottom: 10px;;
}



.btn_box {
  margin-top: 20px;
}
.popup .content {
  padding-top: 30px;
}
</style>

<script>
import adminTable from '@/components/assembly/adminTable'
import upLoadFile from '@/components/assembly/upLoadFile'
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("addClass");
export default {
  name: 'addClass',
  data() {
    return {
      classId: '',
      classList: [{
        hasInteractive: false,
        contentImageFile: '',
        iamgeAFile: '',
        iamgeBFile: '',
        questionAudioFile: '',
        trueAnswer: '',
      }],
      subjectList: [],
      hasInteractive: false,
      popupState: {
        showStatus: false,
        popupName: '新建一课',
      },
      page: {
        curPage: 1,
        pageSize: 10,
        totalRows: 0,
      },
      formData: {
        subjectName: '',
        subjectCategory: '',
        subjectKemu: '',
      },

      tableHead: {
        // border: true,
        operation_width: '150px',
        setFunction: [
          {
            showState: "0",
            hideKey: "showUpdate",
            fun: this.tableEdit,
            name: "编辑"
          },
          {
            showState: "0",
            hideKey: "showDelete",
            fun: this.tableDelete,
            name: "删除"
          },
        ],
        data: [
          {
            name: '课程名称',
            key: 'subjectName',
            align: 'center',
          },
          {
            name: "所属类别",
            key: "subjectCategory",
            align: "center",
            filter: {
              'jczs': '基础知识',
              'nltz': '能力拓展',
            }
          },
          {
            name: "所属科目",
            key: "subjectKemu",
            align: "center",
            filter: {
              pinyin: '拼音',
              shizi: '识字',
              jisuan: '计算',
              yingyu: '英语',
              shizi: '识字',
              tzyd: '拓展阅读',
              sxsw: '数学思维',
            }
          },
        ]
      },
      tableData: [],

      schoolList: [],
      powerSchoolList: [],
      subject1: [
        {
          subjectName: '拼音',
          subjectCode: 'pinyin',
        },
        {
          subjectName: '识字',
          subjectCode: 'shizi',
        },
        {
          subjectName: '计算',
          subjectCode: 'jisuan',
        },
        {
          subjectName: '英语',
          subjectCode: 'yingyu',
        },
      ],
      subject2: [
        {
          subjectName: '拓展阅读',
          subjectCode: 'tzyd',
        },
        {
          subjectName: '数学思维',
          subjectCode: 'sxsw',
        },
      ]

    }
  },
  created() {
    this.jwtAuth = JSON.parse(sessionStorage.getItem('jwtAuth'));
    
    this.initData();
  },
  
  
  methods: {
    ...mapMutations([
      "updateInfo",
    ]),
    ...mapActions([
      "formGet",
      "post"
    ]),
    addClassItem() {
      let obj = {
        hasInteractive: false,
        contentImageFile: '',
        iamgeAFile: '',
        iamgeBFile: '',
        questionAudioFile: '',
      }

      this.classList.push(obj)
    },

    deleteClassItem(index) {
      if(this.classList.length == 1) {
        return false
      }
      this.classList.splice(index, 1);
    },

    
    showPopup(formName) {
      this.popupState = {
        showStatus: true,
        popupName: '新建一课',
      };

      this.classList = [{
        hasInteractive: false,
        contentImageFile: '',
        iamgeAFile: '',
        iamgeBFile: '',
        questionAudioFile: '',
      }],
      this.$refs[formName].resetFields();   // 初始化
      
    },

    initData(searchForm) {
      let data = {}
      data.curPage = this.page.curPage;
      data.pageSize = this.page.pageSize;
      // data.accountId = this.jwtAuth.accountId;
      // data.menuId = this.$route.name;
      

      this.post({
        API: 'selectBmOnlineSubjectPageList',
        data: data
      }).then(res => {
        console.log(res);
        this.tableData = res.data;
        this.page = res.page;
      }).catch(err => {
        this.$message.error(err);
      })
    },

    

    // 新增提交
    submitAdd(formName) {
      let data = {}
      Object.assign(data, this.formData)

      this.classList.forEach((item, index) => {
        if(item.hasInteractive) {
          item.isInteractive = '1'
        }else{
          item.isInteractive = '0'
        }
        item.sort = index;
      })
      data.bmOnlineSubjectContents = this.classList;

      
      console.log(data)
      // return false;

      this.post({
        API: 'insert',
        data: data
      }).then(res => {
        this.$message.success('新建成功')
        this.popupState.showStatus = false;
        this.initData();
      }).catch(err => {
        this.$message.error(err);
      })
    },
    // 表格编辑 回显
    tableEdit(rowData) {
      this.classId = rowData.row.subjectId;
      let data = {
        id: this.classId,
      }
      this.formGet({
        API: 'selectById',
        data: data
      }).then(res => {
        this.popupState = {
          popupName: '编辑',
          showStatus: true,
        }
        // this.$refs['ruleForm'].resetFields();
        this.formData = res;
        
        this.changeClass(res.subjectCategory)

        this.classList = res.bmOnlineSubjectContents
        // if(item.hasInteractive) {
        //   item.isInteractive = '1'
        // }else{
        //   item.isInteractive = '0'
        // }
        this.classList.forEach(item => {
          if(item.isInteractive == 0) {
            this.$set(item, 'hasInteractive', false)
          }else{
            this.$set(item, 'hasInteractive', true)
          }

          // item.contentImageFile = `http://39.105.125.149:8060/bmOssFile/viewFile?fileId=${item.contentImageFile}`
          // item.questionAudioFile = item.questionAudioFile
          
        })
      }).catch(err => {
        this.$message.error(err);
      })
    },
    // 编辑提交
    submitEdit(rowData) {

      let data = this.formData

      data.bmOnlineSubjectContents.forEach((item, index) => {
        if(item.hasInteractive) {
          item.isInteractive = '1'
        }else{
          item.isInteractive = '0'
        }
        item.sort = index;
      })

      console.log(data)
      // return false

      this.post({
        API: 'update',
        data: data
      }).then(res => {
        this.$message.success('修改成功');
        this.initData();
        this.popupState.showStatus = false;
      }).catch(err => {
        this.$message.error(err);
      })
    },
    // 表格删除
    tableDelete(rowData) {
      console.log(rowData)
      let subjectId = rowData.row.subjectId;
      let data = {
        id: subjectId,
      }

      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.formGet({
          API: 'deleteById',
          data: data
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.initData();
        }).catch(err => {
          this.$message.error(err);
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });

      
      
    },

    changeInteractive(e, item) {
      console.log(e)
      console.log(item)
      if(!e) {
        item.iamgeAFile = '';
        item.iamgeBFile = '';
        item.questionAudioFile = '';
        item.trueAnswer = '';
      }
    },
    changeClass(e) {
      this.formData.subjectCode = ''
      if(e == 'jczs') {
        this.subjectList = this.subject1;
      }else{
        this.subjectList = this.subject2;
      }
    },

    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page.curPage = val;
      this.initData();
    }
    
  },
  computed: {
    ...mapState([
    ]),
    // ...mapGetters(["selectedIds"])
  },
  components: {
    adminTable,
    upLoadFile,
  },
}

</script>